<template>
	<view class="container">
		<u-tabs-swiper ref="uTabs" :list="list1" height="72" active-color="#FF9C33" inactive-color="#333"
			bg-color="#fff" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750">
		</u-tabs-swiper>
		<view class="contonts">
			<u-empty :show="lists.length<0" text="订单列表为空!" mode="order"></u-empty>
			<view @click="toorderdetail(item.id)" v-for="(item,index) in lists" :key='index' class="orderitema">
				<view class="order">
					<view class="name"> 订单编号：{{item.orderNo}}
					</view>
					<view class="attitude">
						<text v-show="item.status=='-3'">退款成功</text>
						<text v-show="item.status=='-2'">申请退款</text>
						<text v-show="item.status=='-1'">取消订单</text>
						<text v-show="item.status=='0'">待付款</text>
						<text v-show="item.status=='1'">
							<text v-show="item.type==1">待发货</text>
							<text v-show="item.type==2">待核销</text>
						</text>
						<text v-show="item.status=='2'">待收货</text>
						<text v-show="item.status=='3'">已完成</text>
					</view>
				</view>
				<view class="orderitem">
					<view class="imgbox">
						<image :src="item.shopLogo">
						</image>
					</view>
					<view class="rightbox">
						<view class="shopnameandstatus">
							<view class="shopnamebox">
								<view class="shopnamevie">{{item.shopId_dictText}}</view>
							</view>
						</view>
						<view class="bottomheji" v-if="item.payMoney>0"> 实付款 <text class="xiao">￥</text>
							<text class="zprice">{{item.payMoney}}</text>
						</view>
					</view>
				</view>
				<view class="payment" v-show="item.status=='0'">
					<view class="cancel">取消订单</view>
					<view class="success">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		newgetOpenId,
		selectOrderListForMember //获取所有的订单
	} from "../../request/api.js"
	export default {
		data() {
			return {
				list1: [{
					name: '全部订单'
				}, {
					name: '待确认'
				}, {
					name: '待发货'
				}, {
					name: '售后'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				argument: {
					pageNo: 1
				},
				lists: [{
					shopLogo: '../../static/my/361.png',
					orderNo: '1111111111111',
					shopId_dictText: 'aaaaaa',
					status: '0',
					type: 1,
					groupStatus: 0,
					groupPayAmount: 111,
					payMoney: '1111'
				}],
				pageNo: 1,
				total: '',
				status: '', //当前选择tabs
			}
		},
		onReachBottom() {
			if (this.total <= this.lists.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
			} else {
				this.argument.pageNo++;
				this.getOrderList()
			}
		},
		onLoad(e) {
			console.log(e);
			this.argument.status = e.status
			console.log(e.status);
			this.argument.memberId = uni.getStorageSync('userInfo').id
			if (e.status == 4) {
				this.current = 0
				this.argument.status = ''
				console.log(this.current, 'top');
			}
			if (e.status == 0) {
				this.current = 1
				console.log(this.current, 'top');
			}
			if (e.status == 1) {
				this.current = 2
				console.log(this.current, 'top');
			}
			if (e.status == 3) {
				this.current = 3
				console.log(this.current, 'top');
			}
		},
		onShow() {
			this.lists = []
			this.getOrderList()
		},
		methods: {
			// 跳转订单详情
			toorderdetail(ordernum) {
				console.log('aa');
				uni.navigateTo({
					url: '/pages/my/orderdetails?ordernum=' + ordernum,
				})
			},
			//获取订单列表
			getOrderList() {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				selectOrderListForMember(that.argument).then(res => {
					if (res.success) {
						this.lists = this.lists.concat(res.result.records)
						this.total = res.result.total; //数据总条数
						console.log(res, '订单列表')
					}
					uni.hideLoading()
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.lists = []
				console.log(index);
				if (index == 0) {
					this.argument.status = ''
				}
				if (index == 1) {
					this.argument.status = 0
				}
				if (index == 2) {
					this.argument.status = 1
				}
				if (index == 3) {
					this.argument.status = 3
				}
				this.current = index;
				this.getOrderList()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.huang {
		color: #f1e423;
	}

	.lv {
		color: #71ff19;
	}

	.hong {
		color: #f12f0d;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background: #f7f7f7;
		display: flex;
		flex-direction: column;

		.contonts {
			width: 100%;
			flex: 1;
			margin-top: 20rpx;

			.swiper-item {
				width: 100%;
				height: 100%;
			}

			/* 订单列表 */
			.orderitema {
				border-radius: 44rpx;
				width: 100%;
				margin-bottom: 25rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 28rpx;
			}

			.order {
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #EEEEEE;
				padding-bottom: 10rpx;

				.name {
					color: #333333;
					font-size: 28rpx;
					font-weight: 400;
				}

				.attitude {
					color: #f8492e;
					font-size: 24rpx;
					font-weight: 500;
				}
			}

			.orderitem {
				border-radius: 44rpx;
				width: 100%;
				margin-bottom: 25rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 28rpx;
				display: flex;
				border-bottom: 2rpx solid #EEEEEE;

				.imgbox {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					margin-right: 28rpx;

					&>image {
						display: block;
						border-radius: 20rpx;
						width: 100%;
						height: 100%;
					}
				}

				.rightbox {
					flex: 1;

					.good {
						display: flex;
						flex-wrap: nowrap;
						font-size: 30rpx;
					}

					.shopnameandstatus {
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						// border-bottom: 2rpx solid #EEEEEE;
						.shopnamebox {
							flex: 1;
							display: flex;
							align-items: center;

							.shopnamevie {
								flex: 1;
								font-size: 32rpx;
								color: #333333;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
							}

							&>image {
								width: 40rpx;
								height: 40rpx;
								margin: 0 10rpx;
							}
						}

						.statusbox {
							font-size: 28rpx;
							color: #999999;
						}
					}

					.goodsitem {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;

						.goodsname {
							flex: 1;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							font-size: 28rpx;
							color: #999999;
						}

						.goodsnum {
							font-size: 28rpx;
							color: #999999;
						}
					}

					.bottomheji {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #333333;
						font-size: 28rpx;
						font-weight: 400;
						padding: 5rpx 0;
						margin-top: 60rpx;

						.xiao {
							color: #f8492e;
							font-size: 28rpx;
							font-weight: 400;
						}

						.zprice {
							// margin-left: 16rpx;
							color: #f8492e;
							font-size: 36rpx;
							font-weight: 700;
						}
					}
				}
			}

			.payment {
				display: flex;
				justify-content: end;
				align-items: center;

				.cancel {
					padding: 0 22rpx;
					height: 45.16rpx;
					border-radius: 36rpx;
					border: 2rpx solid #33333399;
					color: #33333399;
					line-height: 45rpx;
					font-size: 28rpx;
					font-weight: 400;
				}

				.success {
					padding: 0 22rpx;
					height: 45.16rpx;
					border-radius: 180rpx;
					background: #ff9c33;
					color: #ffffff;
					line-height: 45rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 500;
					margin-left: 25rpx;
				}
			}
		}
	}
</style>